<div class="container mt-4">
  <!-- 顶部新增按钮 -->
  <div class="mb-3 text-start">
    <button class="btn btn-success" id="btnAdd">
      <i class="fe-plus"></i> 新增视频
    </button>
  </div>

  <div class="card">
    <div class="card-body">
      <h4 class="header-title">视频管理表</h4>

      <table id="basic-datatable" class="table dt-responsive nowrap w-100">
        <thead>
          <tr>
            <th>标题</th>
            <th>描述</th>
            <th>链接</th>
            <th>创建时间</th>
            <th>更新时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody id="video-table-body">
          <!-- JS 渲染 -->
        </tbody>
      </table>

      <!-- 用户新增/编辑模态框 -->
      <div
        class="modal fade"
        id="videoModal"
        tabindex="-1"
        aria-labelledby="videoModalLabel"
        aria-hidden="true"
      >
        <div class="modal-dialog modal-dialog-centered">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="videoModalLabel">新增视频</h5>
              <button
                type="button"
                class="btn-close"
                data-bs-dismiss="modal"
                aria-label="关闭"
              ></button>
            </div>
            <div class="modal-body">
              <form id="videoForm">
                <input type="hidden" id="videoId" />
                <div class="mb-3">
                  <label for="videoTitle" class="form-label">标题</label>
                  <input
                    type="text"
                    class="form-control"
                    id="videoTitle"
                    required
                  />
                </div>
                <div class="mb-3">
                  <label for="videoContent" class="form-label">描述</label>
                  <input
                    type="text"
                    class="form-control"
                    id="videoContent"
                    required
                  />
                </div>
                <div class="mb-3">
                  <label for="videoLink" class="form-label">链接</label>
                  <input
                    type="url"
                    class="form-control"
                    id="videoLink"
                    required
                  />
                </div>
              </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-primary" id="saveUserBtn">
                保存
              </button>
              <button
                type="button"
                class="btn btn-secondary"
                data-bs-dismiss="modal"
              >
                取消
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 删除确认 Modal -->
      <div
        class="modal fade"
        id="deleteConfirmModal"
        tabindex="-1"
        aria-hidden="true"
      >
        <div class="modal-dialog modal-dialog-centered">
          <div class="modal-content">
            <div class="modal-header bg-danger text-white">
              <h5 class="modal-title">确认删除</h5>
              <button
                type="button"
                class="btn-close"
                data-bs-dismiss="modal"
                aria-label="关闭"
              ></button>
            </div>
            <div class="modal-body">
              <p>你确定要删除该视频吗？此操作无法撤销。</p>
            </div>
            <div class="modal-footer">
              <button
                type="button"
                class="btn btn-secondary"
                data-bs-dismiss="modal"
              >
                取消
              </button>
              <button
                type="button"
                id="confirmDeleteBtn"
                class="btn btn-danger"
              >
                确定删除
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
